<template>
  <div class="sms-set">
    <el-container class="sms-set">
      <h3 class="notice-title">短信通知配置</h3>
      <el-header height="auto">
        <div class="search-box">
          <div class="form-container">
            <div class="form-content">
              <el-form :inline="true" label-width="75px" :model="searchForm">
                <el-form-item label="企业名称">
                  <el-input
                    class="input-width"
                    clearable
                    v-model="searchForm.toCompanyName"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="事务类型">
                  <el-select
                    class="input-width"
                    clearable
                    v-model="searchForm.transactionalType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in transactionalTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="通知类型">
                  <el-select
                    class="input-width"
                    clearable
                    v-model="searchForm.noticeType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in noticeTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <br />
                <el-form-item label="接收人">
                  <el-input
                    class="input-width"
                    clearable
                    v-model="searchForm.receiveName"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="手机号" prop="receiveNumber">
                  <el-input
                    class="input-width"
                    clearable
                    maxLength="11"
                    v-model="searchForm.receiveNumber"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="状态">
                  <el-select
                    class="input-width"
                    clearable
                    v-model="searchForm.status"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in statusOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="search-btn">
              <el-button type="primary" @click="search" icon="el-icon-search"
                >查询
              </el-button>
              <el-button icon="el-icon-refresh-right" @click="reset"
                >重置
              </el-button>
            </div>
          </div>
        </div>
        <div class="gutter-bar"></div>
      </el-header>
      <main>
        <el-editable
          class="table-box"
          v-loading="tableLoading"
          :data="tableData"
          height="auto"
          :columns="noticeTableColumn"
        >
          <template slot="default-operation" slot-scope="scope">
            <el-button size="small" type="text" @click="viewHistory(scope)"
              >历史消息</el-button
            >
            <el-button size="small" type="text" @click="edit(scope)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="text"
              @click="enableOrDisable(scope)"
              >{{ scope.row.status === 1 ? '停用' : '启用' }}</el-button
            >
          </template>
        </el-editable>
        <el-pagination
          align="right"
          style="margin-top:10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="PAGE_NUMBER"
          :page-size="pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="totalElements"
        />
      </main>
    </el-container>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable/door/index.vue'
import {
  transactionalTypeOption,
  noticeTypeOption,
  statusOption,
  noticeTableColumn
} from './const'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common'
import {
  McSmsTemplateNewPageList,
  McSmsTemplateNewUpdateStatus
} from '@const/api_messageCenter'
export default {
  name: 'index',
  components: {
    ElEditable
  },
  data() {
    let validatePhone = (rule, value, callback) => {
      let regExp = /^1\d{0,10}$/
      if (value) {
        if (!regExp.test(value)) {
          callback(new Error('请输入规范的手机号'))
        } else {
          callback()
        }
      }
    }
    return {
      transactionalTypeOption,
      noticeTypeOption,
      statusOption,
      noticeTableColumn,
      PAGINATION_LAYOUT,
      PAGE_NUMBER,
      page: 1,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      searchForm: {
        toCompanyName: '',
        transactionalType: '',
        noticeType: '',
        receiveName: '',
        receiveNumber: '',
        status: ''
      },
      tableLoading: false,
      tableData: []
    }
  },
  created() {
    this.initLayout()
    this.getTableData()
  },
  methods: {
    // 初始化右上角的新增按钮
    initLayout() {
      let obj = {
        type: 'btn',
        arr: [
          {
            type: 'primary',
            val: '添加通知',
            icon: 'el-icon-plus',
            handle: this.add
          }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    // 重置
    reset() {
      for (let searchFormKey in this.searchForm) {
        this.searchForm[searchFormKey] = ''
      }
      this.search()
    },
    // 查询
    search() {
      this.page = 1
      this.getTableData()
    },
    // 编辑
    edit({row}) {
      this.$router.push({
        path: '/systemSetup/smsSet/add',
        query: {
          noticeId: row.id
        }
      })
    },
    enableOrDisableRequest(row) {
      this.$axios({
        url: McSmsTemplateNewUpdateStatus,
        method: 'POST',
        data: {
          id: row.id,
          status: row.status === 0 ? 1 : 0
        }
      }).then(res => {
        if (res.data.code === '0') {
          let msg = row.status === 0 ? '启用成功' : '停用成功'
          this.$message.success(msg)
          this.getTableData()
        }
      })
    },
    // 起禁用
    enableOrDisable({row}) {
      if (row.status === 1) {
        this.$confirm('确认是否要停用 ?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.enableOrDisableRequest(row)
          })
          .catch(() => {})
      } else {
        this.enableOrDisableRequest(row)
      }
    },
    // 查看历史消息
    viewHistory({row}) {
      this.$router.push({
        path: '/systemSetup/smsSet/historyRecord',
        query: {
          noticeId: row.id
        }
      })
    },
    // 新增短信通知
    add() {
      this.$router.push({
        path: '/systemSetup/smsSet/add'
      })
    },
    //获取列表数据
    getTableData() {
      this.tableLoading = true
      this.$axios({
        url: McSmsTemplateNewPageList,
        method: 'POST',
        data: {
          ...this.searchForm,
          page: this.page,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          let payload = res.data.payload
          this.tableData = payload && payload.content ? payload.content : []
          this.totalElements =
            payload && payload.totalElements ? payload.totalElements : 0
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    // 分页条数变化
    handleSizeChange(size) {
      this.pageSize = size
      this.getTableData()
    },
    // 切换页码
    handleCurrentChange(page) {
      this.page = page
      this.getTableData()
    }
  }
}
</script>

<style scoped lang="less">
.gutter-bar {
  height: 16px;
  background: #f0f2f5;
}
.sms-set {
  height: 100%;
  padding: 0 !important;

  .notice-title {
    font-size: 16px;
    color: #26344c;
    padding: 16px;
    border-bottom: 1px solid #eef0f5;
  }

  .el-header {
    padding: 0;
  }
  main {
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }
}
.search-box {
  .input-width {
    width: 200px;
  }
  .form-container {
    padding: 16px 16px 6px 16px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    .form-content {
      flex: 1;
    }
    .search-btn {
      align-self: flex-end;
      padding-bottom: 12px;
      align-items: flex-start;
    }
  }
}
</style>
